:root {
  --body-bg-color: #06cece44;
  --body-mask-color: #1f5656c9;
  --table-tr-bg-color: #008c8c;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--body-bg-color);
}

.button-cs {
  line-height: 30px;
  height: 30px;
  min-width: 35px;
  width: auto;
  color: white;
  font-size: 15px;
  font-weight: bold;
  font-family: Arial;
  background: linear-gradient(to bottom, var(--body-bg-color) 5%, var(--table-tr-bg-color) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--body-bg-color)', endColorstr='var(--table-tr-bg-color)', GradientType=0);
  border: 1px solid #84bbf3;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0px 1px 0px 0px #bbdaf7;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

.button-cs:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, var(--table-tr-bg-color) 5%, var(--body-bg-color) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--table-tr-bg-color)', endColorstr='var(--body-bg-color)', GradientType=0);
}


body>div {
  /* border: thin solid red; */
  display: flex;
  flex-shrink: 1;
  align-items: center;
}

body>div:nth-of-type(1) {
  justify-content: space-around;
  min-height: calc(10%);
}

body>div:nth-of-type(2) {
  min-height: calc(80%);
  flex-direction: column;
  justify-content: space-between;
}

body>div:nth-of-type(2)>table {
  width: 90%;
  border-collapse: collapse;
}

body>div:nth-of-type(2)>table th {
  background-color: var(--table-tr-bg-color);
  min-width: 50px;
  color: white;
}

body>div:nth-of-type(2)>table th>div {
  display: flex;
  justify-content: center;
  align-items: center;

}

body>div:nth-of-type(2)>table th span {
  margin: 5px;
  width: 15px;
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

body>div:nth-of-type(2)>table th span>i {
  color: var(--body-bg-color);
}

body>div:nth-of-type(2)>table th span>i:first-child::after {
  content: "\25B2";
}

body>div:nth-of-type(2)>table th span>i:last-child::after {
  content: "\25BC";
}

body>div:nth-of-type(2)>table th span>i:hover,
body>div:nth-of-type(2)>table th.ascending span>i:first-child,
body>div:nth-of-type(2)>table th.descending span>i:last-child {
  cursor: pointer;
  color: white;
}

body>div:nth-of-type(2)>table td {
  border: 1px solid #999;
  text-align: center;
  padding: 20px 0;
}


body>div:nth-of-type(2)>table tbody tr:nth-child(odd) {
  background-color: #eee;
}

body>div:nth-of-type(2) li {
  display: inline-block;
  width: 60px;
  height: 30px;
  list-style: none;
  border: 2px solid #f0f0f0;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
}

body>div:nth-of-type(2) div>ul>li:not(:nth-of-type(1)):not(:nth-last-of-type(1)) {
  width: 37px;
}

body>div:nth-of-type(2) div>ul>li.active,
body>div:nth-of-type(2) div>ul>li:hover {
  background-color: var(--table-tr-bg-color);
  color: white;
  border: 2px solid var(--table-tr-bg-color);
  cursor: pointer;
}

body>div:nth-of-type(2)>table tbody tr:hover {
  background-color: #ccc;
}

body>div:nth-of-type(2)>div {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 50px;
  align-items: center;
}

body>div:nth-of-type(3) {
  /* height: calc(10%);  */
  border: thin solid blue;
  justify-content: center;
}

body>div.div-dialog {
  height: calc(100%);
  width: calc(100%);
  position: fixed;
  top: 0;
  background-color: var(--body-mask-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

body>div.div-dialog>div {
  min-height: calc(70%);
  width: calc(50%);
  background-color: #ffffff;
}

body>div.div-dialog>div>p {
  background-color: var(--table-tr-bg-color);
  margin: 0;
  display: flex;
  justify-content: space-between;
}

body>div.div-dialog>div>div {
  height: calc(75%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: left;
  padding-left: 15%;

}

body>div.div-dialog>div>div>div:last-child {
  margin: 0 3%;
  display: flex;
  justify-content: space-around;
}
